<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    .lazy-load {
      display: block;
      width: 90%;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <!-- 为什么要使用图片懒加载 
  1.图片太多，导致服务器压力很大
  2.提高性能，增加用户体验-->

  <!-- 图片懒加载的原理
    img里面是通过src属性发请求的，通过自定义属性的方式把图片保存里面，等到可视区域再把图片赋值给src，这就是图片懒加载的关键
   -->
  <div class="box">
    <img src="./img/loading.gif" alt="1" class="lazy-load" data-src="./img/dusk.jpeg">
    <img src="./img/loading.gif" alt="2" class="lazy-load" data-src="./img/sea.jpeg">
    <img src="./img/loading.gif" alt="3" class="lazy-load" data-src="./img/shu.jpeg">
    <img src="./img/loading.gif" alt="4" class="lazy-load" data-src="./img/sky.jpeg">
    <img src="./img/loading.gif" alt="5" class="lazy-load" data-src="./img/starrysky.jpeg">
    <img src="./img/loading.gif" alt="6" class="lazy-load" data-src="./img/向日葵.jpeg">
  </div>

</body>

<script type="text/javascript">
  // onload是等所有的资源文件加载完毕以后再绑定事件
  window.onload = function () {
    // 获取图片列表，即img标签列表
    var imgs = document.querySelectorAll('img');

    // 获取到浏览器顶部的距离
    function getTop(e) {
      return e.offsetTop;
    }

    // 懒加载实现
    function lazyload(imgs) {
      // 可视区域高度
      var h = window.innerHeight;
      //滚动区域高度
      var s = document.documentElement.scrollTop || document.body.scrollTop;
      for (var i = 0; i < imgs.length; i++) {
        //图片距离顶部的距离大于可视区域和滚动区域之和时懒加载
        if ((h + s) > getTop(imgs[i])) {
          // 真实情况是页面开始有2秒空白，所以使用setTimeout定时2s
          (function (i) {
            setTimeout(function () {
              // 不加立即执行函数i会等于9
              // 隐形加载图片或其他资源，
              //创建一个临时图片，这个图片在内存中不会到页面上去。实现隐形加载
              var temp = new Image();
              temp.src = imgs[i].getAttribute('data-src');//只会请求一次
              // onload判断图片加载完毕，真是图片加载完毕，再赋值给dom节点
              temp.onload = function () {
                // 获取自定义属性data-src，用真图片替换假图片
                imgs[i].src = imgs[i].getAttribute('data-src')
              }
            }, 2000)
          })(i)
        }
      }
    }
    lazyload(imgs);

    // 滚屏函数
    window.onscroll = function () {
      lazyload(imgs);
    }
  }

</script>

</html>